import QtQuick
import QtQuick.Controls

Flickable {
    id: root

    property alias source: currentImage.source

    clip: true
    contentHeight: Math.max(currentImage.height * currentImage.scale,root.height)
    contentWidth: Math.max(currentImage.width * currentImage.scale,root.width)


    ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
    ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }

    Image {
        id: currentImage
        anchors.centerIn: parent
        fillMode: Image.PreserveAspectFit
        source: "qrc:/EpImageScale/chahua.jpg"

        MouseArea {
            id: mouseArea
            hoverEnabled: true
            anchors.fill: parent
            width: currentImage.paintedWidth * root.imgScale
            height: currentImage.paintedHeight * root.imgScale
            onWheel: function(wheel){
                // 获取鼠标的位置

                var oldScale = currentImage.scale;
                var rollCnt = wheel.angleDelta.y / 120; // +1 -1
                if (wheel.modifiers & Qt.ControlModifier) {
                    //照片缩放
                    if(rollCnt < 0){
                        zoomIn(Math.abs(rollCnt * stepScale));
                    }else{
                        zoomOut(Math.abs(rollCnt * stepScale));
                    }
                }


                scaleCenterX = wheel.x;
                scaleCenterY = wheel.y;

                if (hbar.visible) {
                    root.contentX += wheel.x * (currentImage.scale - oldScale);
                    console.log("设置缩放中心点")
                }

                if (vbar.visible) {
                    root.contentY += wheel.y * (currentImage.scale - oldScale);
                    console.log("设置缩放中心点")
                }
            }

            Rectangle{
                anchors.fill: parent

                color: "transparent"
                border.width: 2
                border.color: "red"
            }
        }
    }



//    Column{
//        parent: root.parent
//        anchors.fill: parent
//        anchors.margins: 6
//        spacing: 10

//        PropertyDump{
//            title: "Root&Flickable"
//            target: root
//            properties: ["x","y","width","height","contentX","contentY",
//                "contentWidth","contentHeight",
//                "scaleCenterX","scaleCenterY","imgScale"]
//        }

//        PropertyDump{
//            title: "Image"
//            target: currentImage
//            properties: ["x","y","width","height","scale","paintedWidth","paintedHeight"]
//        }

//        PropertyDump{
//            title: "MouseArea"
//            target: mouseArea
//            properties: ["mouseX","mouseY","width","height"]
//        }
//    }


    Column{
        Text{text:""}
    }
    property alias imgScale: currentImage.scale
    property real minScale: 0.05
    property real maxScale: 20
    property real stepScale: 0.2

    property real scaleCenterX/*: mouseArea.mouseX*/
    property real scaleCenterY/*: mouseArea.mouseY*/

    //缩小指定比例 1代表100%
    function zoomIn(zoomInVal){
        var scale = currentImage.scale - zoomInVal;
        if(scale < minScale)
            scale = minScale;
        currentImage.scale = scale;
    }

    function zoomOut(zoomOutVal){
        var scale = currentImage.scale + zoomOutVal;
        if(scale > maxScale)
            scale = maxScale;
        currentImage.scale = scale;
    }
}
